<template>
  <div class="loginBox">
    <div class="background">
      <img src="../assets/workStation/backgroundBox.png" alt="">
    </div>
    <div class="background2">
      <div class="von">
        <span class="von_sw">SW</span>
        <span class="von_title">江苏由甲申田<br />新能源科技有限公司</span>
      </div>
    </div>
    <div class="loginContent justify-evenly" v-if="isBeforeLogin">
      <div v-for="item in accountList" class="accountList" @click="pickerUserRole(item)">
        <div class="icon">
          <img :src="item.url" alt="">
        </div>
        <div>{{item.name}}</div>
      </div>
    </div>
    <div class="loginContent justify-evenly loginPage" v-else>
      <div class="loginPageLeft flex-column">
        <img :src="url1" alt="">
        <span>{{currentRole.name || '--'}}</span>
        <el-button type="primary" size="small" style="width: 200px;height: 32px;font-size: 14px;margin-top: 4px;background-color:#336cb5" @click="changeLogin">
          切换登陆
        </el-button>
      </div>
      <div class="loginPageRight flex-column1">
        <VonInput v-model="loginInfo.name" size="small" label="账号" :suffix="false"></VonInput>
        <VonInput v-model="loginInfo.password" size="small" label="密码" :suffix="false" show-password></VonInput>
        <el-button type="primary" size="small" style="width: 100%;height: 32px;font-size: 14px;background-color:#336cb5" @click="landInto">
          登陆
        </el-button>
      </div>
    </div>
    <!--临时使用，正式删除-->
    <!-- <div class="tmpDevice">
      <el-select v-model="device" placeholder="选择设备" @change="deviceChange()">
        <el-option v-for="item in devices" :key="item.id" :label="item.name" :value="item.id"></el-option>
      </el-select>
    </div> -->
  </div>
</template>
<script>
import url1 from "../assets/workStation/manager.png";
import url2 from "../assets/workStation/engineer.png";
import url3 from "../assets/workStation/operator.png";
import { mapState } from "vuex";
import {getUserInfo, setCookie, setStore, getYourIP, getStore} from "../common";
import  login, {
  loginAccount,
  getRecipeCurrent
} from "../api/workStation/login";
import {
  getDeviceListApi,
  deviceIpUpdate
} from "../api/workStation/mainControl";
import { openLoading, closeLoading } from "../common/prompt";
export default {
  data() {
    return {
      url1,
      url2,
      url3,
      isBeforeLogin: true,
      loginInfo: {
        name: "admin",
        password: "1q2w3E*"
      },
      currentRole: {},
      devices: [],
      device: null
    };
  },
  mounted() {
    getDeviceListApi().then(res => {
      this.devices = res.data;
    });
  },
  methods: {
    deviceChange() {
      openLoading();
      deviceIpUpdate({
        deviceId: this.device
      }).then(() => {
        closeLoading();
        this.$message.success("切换成功");
      });
    },
    pickerUserRole(item) {
      this.isBeforeLogin = false;
      this.currentRole = item;
    },
    changeLogin() {
      this.isBeforeLogin = true;
      this.loginInfo = {};
    },
    landInto() {
      let _this = this;
      let data = this.loginInfo;
      openLoading("登陆并加载配置中...");
      loginAccount(data).then(res => {
        if (res.status == 200 && res.data) {
          const userInfo = res.data;
          const token = userInfo.token;
          _this.$store.dispatch("setUserInfo", userInfo);
          setStore("token", token);
          const currentRole = _this.currentRole;
          setStore("currentRole", currentRole);
          _this.$store.dispatch("setCurrentMenu", "");
          setCookie("Sw.WorkLine.Http.Api", token);
          if (userInfo.deviceDto.route != "deviceManage") {
            getRecipeCurrent().then(recipe => {
              closeLoading();
              if (recipe.data) {
                const recipeDevices = recipe.data.recipeFullDto.recipeDetails;
                if (
                  recipeDevices.findIndex(
                    d => d.deviceId == userInfo.deviceDto.id
                  ) > -1
                ) {
                  const currentRecipe = {
                    recipeId: recipe.data.recipeFullDto.id,
                    recipeName: recipe.data.recipeFullDto.name,
                    productId: recipe.data.productId,
                    productName: recipe.data.productName,
                    device: recipeDevices.find(
                      d => d.deviceId == userInfo.deviceDto.id
                    ),
                    materials: recipe.data.recipeFullDto.recipeMaterials
                  };
                  setStore("currentRecipe", currentRecipe);
                  if (
                    userInfo.roles.findIndex(u => u == "admin") > -1 &&
                    currentRole.id == "manager"
                  ) {
                    _this.$router.push(
                      "/workStationManager?role=" + userInfo.deviceDto.ctrl
                    );
                  } else {
                    _this.$router.push(
                      "/workStationOperator?role=" + userInfo.deviceDto.route
                    );
                  }
                } else {
                  _this.$message.error("该设备未在生产配方中");
                }
              } else {
                _this.$message.error("未下发生产配方");
              }
            });
          } else {
            closeLoading();
            _this.$router.push("/home/deviceManage");
          }
        } else {
          closeLoading();
          _this.$message({
            message: "密码或用户名错误",
            type: "warning"
          });
        }
      });
    },
    getUserInfo() {
      return {
        userName: "當前用戶"
      };
    }
  },
  computed: {
    ...mapState({
      userInfo: state => state.user.userInfo
    }),
    accountList(){
      let clientIp = getStore('clientIp');
      if(clientIp === '192.168.1.3'){
        return [
          {
            id: "manager",
            name: "管理员登陆",
            count: 1,
            url: url1
          },
          {
            id: "engineer",
            name: "工程师登陆",
            count: 2,
            url: url2
          },
          {
            id: "operator",
            name: "操作员登陆",
            count: 3,
            url: url3
          }
        ]
      }else{
        return [
          {
            id: "manager",
            name: "管理员登陆",
            count: 1,
            url: url1
          },
          {
            id: "operator",
            name: "操作员登陆",
            count: 3,
            url: url3
          }
        ]
      }
    },
  },
  created() {
    let userInfo = this.getUserInfo();
    this.$store.dispatch("setUserInfo", userInfo);
    getYourIP();//将本地ip存起来
  }
};
</script>
<style lang='scss' scoped>
@import "../style/various.scss";

.loginBox {
  width: 100vw;
  height: 100vh;
  position: relative;
  overflow: hidden;
  .background {
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;

    img {
      width: 100%;
      height: 100%;
    }
  }

  .background2 {
    z-index: 1;
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    background: url("../assets/workStation/background2.png") no-repeat top left;

    .von {
      display: flex;
      margin-top: 23px;
      color: white;

      .von_sw {
        color: white;
        font-size: 36px;
        display: inline-block;
        width: 100px;
        text-align: center;
      }

      .von_title {
        line-height: 1.4;
      }
    }
  }

  .loginContent {
    z-index: 99;
    cursor: pointer;
    width: 582px;
    height: 248px;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background: $ThemeColor1;
    font-size: 22px;
    color: white;

    .accountList {
      text-align: center;

      .icon {
        margin-bottom: 40px;
      }
    }
  }

  .loginPage {
    display: flex;

    .loginPageLeft {
      width: 38%;
      font-size: 18px;
      height: 100%;
      border-right: 1px solid rgba(255, 255, 255, 0.5);
    }

    .loginPageRight {
      padding: 0 6%;
      width: 62%;
      height: 100%;
    }
  }

  .tmpDevice {
    position: absolute;
    left: 50%;
    top: 0;
    z-index: 1000;
  }
}
</style>